<template>
  <div class="localFile">
    <div class="header">
      <a-button type="primary" @click="download('https://xuxinblog.oss-cn-qingdao.aliyuncs.com/blog/2021/04/22/1.png')">点击下载图片</a-button>
      <a-upload
        :customRequest="customRequest"
        name="file"
        :showUploadList="false"
        :multiple="true"
      >
        <a-button>
          <upload-outlined></upload-outlined>
          添加本地音乐
        </a-button>
      </a-upload>
    </div>
    <div class="box">
      <div class="imgBox">
        <span>本地图片加载</span>
        <a-image
          :width="200"
          :height="200"
          :src="state.image"
          fallback=""
        />
      </div>
      <div class="audioBox">
        <div id="waveform"></div>
        <div class="btns">
          <a-button
            type="primary"
            shape="circle"
            @click="play"
            :disabled="state.audioStatus === 'loading'"
          >
            <template #icon>
              <LoadingOutlined v-if="state.audioStatus === 'loading'" />
              <PlayCircleOutlined v-else-if="state.audioStatus !== 'play'" />
              <PauseCircleOutlined v-else-if="state.audioStatus !== 'pause'" />
            </template>
          </a-button>
        </div>
      </div>
    </div>
    <audio :src="state.audio" controls></audio>
  </div>
</template>

<script>
import WaveSurfer from 'wavesurfer.js'
import { useRoute } from 'vue-router'
import { defineComponent, onMounted, onUnmounted, reactive } from 'vue'
import { LgetItem, LsetItem } from '@/utils/storage'

export default defineComponent({
  setup() {
    const route = useRoute()
    const state = reactive({
      image: '',
      audio: '',
      wavesurfer: null,
      audioStatus: 'loading',
    })
    function download(url) {
      window.ipcRenderer.invoke('start-download', {
        downloadUrl: url,
        folder: '',
      })
    }
    function customRequest(fileData) {
      state.audioStatus = 'loading'
      const file = fileData.file
      state.wavesurfer.load(window.URL.createObjectURL(file))
      // if (file) {
      //   var reader = new FileReader()
      //   reader.onload = function (evt) {
      //     var blob = new window.Blob([new Uint8Array(evt.target.result)])
      //     state.wavesurfer.loadBlob(blob)
      //   }
      //   reader.onerror = function (evt) {
      //     console.error(evt)
      //   }
      //   reader.readAsArrayBuffer(file)
      // }
      const path = 'atom:///' + fileData.file.path
      state.audio = path
    }
    function play() {
      state.wavesurfer.playPause()
    }
    onMounted(() => {
      const localImage = LgetItem('localImage')
      if (route.query.image) {
        download(route.query.image)
      } else {
        if (localImage) {
          state.image = localImage
        }
      }
      window.ipcRenderer.on('download-done', (_event, data) => {
        state.image = 'atom:///' + data.filePath
        console.log(state.image)
        LsetItem('localImage', state.image)
      })
      state.wavesurfer = WaveSurfer.create({
        container: '#waveform',
        waveColor: '#fff',
        cursorColor: '#fff',
        height: 200,
        barWidth: 5,
        barGap: 2,
        progressColor: '#7fb2cc',
      })
      state.wavesurfer.on('play', () => {
        state.audioStatus = 'play'
      })
      state.wavesurfer.on('pause', () => {
        state.audioStatus = 'pause'
      })
      state.wavesurfer.on('ready', () => {
        state.audioStatus = 'pause'
      })
    })
    onUnmounted(() => {
      window.ipcRenderer.removeAllListeners('download-done')
    })
    return {
      download,
      state,
      customRequest,
      play,
    }
  },
})
</script>

<style lang="scss">
.localFile {
  flex: 1;
  .header {
    padding: 20px;
  }
  .box {
    .imgBox {
      display: flex;
      flex-direction: column;
    }
    .audioBox {
      display: flex;
      flex-direction: column;
      position: relative;
      margin-bottom: 20px;
      #waveform {
        width: 100%;
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
          url('https://wavesurfer-js.org/css/bg.jpg') no-repeat center;
        background-size: cover;
      }
      .btns {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 10;
      }
    }
  }
}
</style>
